<eda-dialog [inject]="dialog">

    <div body class="grid">

        <div class="col-8" style="height: 80%; ">

            <div class="eda-chart-panel col-8" style="height: 80%; margin-left: 6em; margin-top: 4em; background-color: var(--panel-color);">

                <panel-chart *ngIf="!!display" #PanelChartComponent [props]="panelChartConfig" style="height: 80%; width: 90%; display:block;  margin-top:5em"></panel-chart>

            </div>

        </div>

        <div  class="col-2" *ngIf='panelChartConfig.edaChart != "histogram"' >

            <h6 i18n="@@addtrend" class="custom-border-b1" style="margin-top: 2em;">
                Tendencia
            </h6>

            <div [pTooltip]="trendTooltip" tooltipPosition="left">
                <p-inputSwitch id="switchQueryMode" class="col-1 sql-switch" [(ngModel)]="addTrend"
                    tooltipPosition="left" (onChange)="checkTrend()" [disabled]="!showTrend">
                </p-inputSwitch>
            </div>
        </div>
        <div class="col-2" *ngIf='panelChartConfig.edaChart != "histogram"' >
            <h6 i18n="@@addComparative" class="custom-border-b1" style="margin-top: 2em;">
                Comparativa
            </h6>

            <div [pTooltip]="comparativeTooltip" tooltipPosition="left">
                <p-inputSwitch id="switchQueryMode" class="col-1 sql-switch" [(ngModel)]="addComparative"
                    tooltipPosition="left" (onChange)="setComparative()" [disabled]="!showComparative">
                </p-inputSwitch>
            </div>


        </div>

        <div class="col-2 col-offset-8">
            <h6 i18n="@@showLabels" class="custom-border-b1" style="margin-top: 2em;">
                Mostrar Etiquetas
            </h6>

            <div [pTooltip]="showLablesTooltip" tooltipPosition="left">
                <p-inputSwitch id="switchQueryMode" class="col-1 sql-switch" [(ngModel)]="showLabels"
                    tooltipPosition="left" (onChange)="setShowLables()" >
                </p-inputSwitch>
            </div>

        </div>
        <div class="col-2 col-offset-8">
            <h6 i18n="@@showLabelsPercent" class="custom-border-b1" style="margin-top: 2em;">
                Mostrar Etiquetas en Porcentajes
            </h6>

            <div [pTooltip]="showLablesPercentTooltip" tooltipPosition="left">
                <p-inputSwitch id="switchQueryMode" class="col-1 sql-switch" [(ngModel)]="showLabelsPercent"
                    tooltipPosition="left" (onChange)="setShowLablesPercent()" >
                </p-inputSwitch>
            </div>

        </div>
        
        <div  *ngIf=showNumberOfColumns class="col-2" style="margin-top: 2em;">
            <h6 i18n="@@histogramColum" class="custom-border-b1">
                Columnas
            </h6>
        <div   *ngIf=showNumberOfColumns [pTooltip]="columnsTooltip" tooltipPosition="left">
            <input type="number" pInputText id="columnes" name="columnes"
            min="3" max="100" [(ngModel)]="numberOfColumns" (change)="SetNumberOfColumns()" > 
        </div>
       </div>



        <div class="col-4 col-offset-8">

            <h6 i18n="@@colorsChartH6" class="custom-border-b1">
                Colores
            </h6>

            <div class="grid chart-color-selection">

                <ng-container *ngFor="let serie of series; let i = index">

                    <div class=" col-6 ">
                        <input type="text" pInputText style="width: 40%" [value]="serie.label" disabled="true" 
                            [style.border-color]="serie.border" />

                        <p-colorPicker [(ngModel)]="serie.bg" (onChange)="handleInputColor(serie)" format="hex"
                            appendTo="body">
                        </p-colorPicker>

                        <input type="text" pInputText class="eda-color-pick" [(ngModel)]="serie.bg"
                            (input)="handleInputColor(serie)" minlength="7" >

                    </div>

                </ng-container>

            </div>


        </div>


    </div>


    <div footer>

        <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">

            <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check"
                class="p-button-raised p-button-success" i18n-label="@@guardarButton" label="Confirmar"
                id="eda_chart_dialog_confirmar">
            </button>

            <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times"
                class="p-button-raised p-button-danger" i18n-label="@@cancelarButton" label="Cancelar">
            </button>

        </div>

    </div>

</eda-dialog>